<template>
  <div>
    <el-dialog
      :title="$t('屏幕设置')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="900px"
    >
      <div class="setting_box u-f">
        <!-- 设置 -->
        <div class="left u-f1" style="margin-right: 10px;">
          <h3 class="head font14 text_black">{{ $t("设置播放位置") }}</h3>
          <div class="hear_tip font14 text_danger">
            {{ $t("屏幕宽高尺寸为") }}：1080*1920{{ $t("像素") }}。{{
              $t("不填或填0则为不显示")
            }}。
          </div>
          <div class="hear_tip font14 text_danger">
            {{ $t("各个部位的广告图片和高度不填则默认为不设置") }}
          </div>
          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">{{ $t("头部广告位") }}：</p>
              <div class="ipt_box">
                <span class="font14 text_black">{{ $t("高") }}</span>
                <el-input v-model="header" @change="headerInput"></el-input>
                <span class="font14 text_black">{{ $t("像素") }}</span>
              </div>
            </div>
            <el-upload
              :action=" protocol + '//cdb.workair.vip/operate/screenadv/fileUpload'"
              :headers="{ token, ocode }"
              name="img_file"
              :data="{ type: 'image' }"
              :file-list="headerList"
              :limit="1"
              :on-exceed="headerExceed"
              :on-success="headerSuccess"
              :on-remove="headerRemove"
              :on-error="headerError"
              list-type="picture"
            >
              <el-button type="primary">{{ $t("上传图片") }}</el-button>
            </el-upload>
          </div>

          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">{{ $t("中部广告位") }}：</p>
              <div class="ipt_box">
                <span class="font14 text_black">{{ $t("高") }}</span>
                <el-input v-model="center" @change="centerInput"></el-input>
                <span class="font14 text_black">{{ $t("像素") }}</span>
              </div>
            </div>
            <el-upload
              :action=" protocol + '//cdb.workair.vip/operate/screenadv/fileUpload'"
              :headers="{ token, ocode }"
              name="img_file"
              :data="{ type: 'image' }"
              :file-list="centerList"
              :limit="1"
              :on-exceed="centerExceed"
              :on-success="centerSuccess"
              :on-remove="centerRemove"
              :on-error="centerError"
              list-type="picture"
            >
              <el-button type="primary">{{ $t("上传图片") }}</el-button>
            </el-upload>
          </div>

          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">{{ $t("底部广告位") }}：</p>
              <div class="ipt_box">
                <span class="font14 text_black"
                  >{{ $t("宽高") }}：840*{{ footer }}{{ $t("像素") }}</span
                >
              </div>
            </div>
            <el-upload
              :action=" protocol + '//cdb.workair.vip/operate/screenadv/fileUpload'"
              :headers="{ token, ocode }"
              name="img_file"
              :data="{ type: 'image' }"
              :file-list="footerList"
              :limit="1"
              :on-exceed="footerExceed"
              :on-success="footerSuccess"
              :on-remove="footerRemove"
              :on-error="footerError"
              list-type="picture"
            >
              <el-button type="primary">{{ $t("上传图片") }}</el-button>
            </el-upload>
          </div>

          <div class="txt_box u-f u-f-ac">
            <p class="lable font14 text_black">{{ $t("投放计划广告位") }}：</p>
            <span class="font14 text_black"
              >{{ $t("宽高") }}：1080*{{ plan }}{{ $t("像素") }},{{
                $t("高度不能低于730像素")
              }}</span
            >
          </div>

          <el-button class="submit" type="primary" @click="submitReg">{{
            $t("提交")
          }}</el-button>
        </div>
        <!-- 预览图 -->
        <div class="right u-f1" style="margin-left: 10px;">
          <h3 class="head font14 text_black">{{ $t("效果预览图") }}</h3>
          <div class="previcw_box">
            <div :style="{ height: header / 3 + 'px' }" v-if="header">
              <img class="img" :src="headerDefaultImg" />
            </div>
            <div :style="{ height: plan / 3 + 'px' }" v-if="plan">
              <img class="img" src="../../assets/img/plan_zhan.png" />
            </div>
            <div :style="{ height: center / 3 + 'px' }" v-if="center">
              <img class="img" :src="centerDefaultImg" />
            </div>
            <div class="footer u-f">
              <img class="qrcode" src="../../assets/img/qrcode.png" />
              <img class="image" :src="footerDefaultImg" />
            </div>
          </div>
        </div>
        <!--  -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "screenSet",
  data() {
    return {
      isShow: false,
      protocol: window.location.protocol,
      return_id: 0,
      height: 1920,
      header: "",
      headerDefaultImg: require("../../assets/img/header_zhan.png"),
      header_id: "",
      headerList: [],
      center: "",
      centerDefaultImg: require("../../assets/img/center_zhan.png"),
      center_id: "",
      centerList: [],
      footer: 190,
      footerDefaultImg: require("../../assets/img/footer_zhan.png"),
      footer_id: "",
      footerList: [],
    };
  },
  props: {
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  computed: {
    ...mapState(["token", "ocode"]),
    plan() {
      let res = this.height - this.header - this.center - this.footer;
      res = res > 730 ? res : 730;
      return res;
    },
  },
  methods: {
    show() {
      this.header_id = "";
      this.headerList = [];
      this.headerDefaultImg = require("../../assets/img/header_zhan.png");
      this.center_id = "";
      this.centerList = [];
      this.centerDefaultImg = require("../../assets/img/center_zhan.png");
      this.footer_id = "";
      this.footerList = [];
      this.footerDefaultImg = require("../../assets/img/footer_zhan.png");
      this.isShow = true;
      this.return_id = this.id;
      if (this.id != 0) {
        setTimeout(() => {
          this.getData();
        }, 150);
      }
    },
    getData() {
      util
        .$http("/screenadv/size", {
          id: this.id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.header = res.data.top_height;
            this.center = res.data.middle_height;
            if (res.data.top_image) {
              this.header_id = res.data.top_image;
              this.headerDefaultImg = res.data.top_image;
            }
            if (res.data.middle_image) {
              this.center_id = res.data.middle_image;
              this.centerDefaultImg = res.data.middle_image;
            }
            if (res.data.bottom_image) {
              this.footer_id = res.data.bottom_image;
              this.footerDefaultImg = res.data.bottom_image;
            }
          }
        });
    },
    submit(is_top, is_middle) {
      util
        .$http("/screenadv/addSize", {
          id: this.id,
          is_top: `${is_top}`,
          is_middle: `${is_middle}`,
          top_height: this.header,
          top_image: this.header_id,
          middle_height: this.center,
          middle_image: this.center_id,
          bottom_height: this.footer,
          bottom_image: this.footer_id,
          plan_height: this.plan,
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.return_id = res.data.id;
            this.isShow = false;
            this.$emit("hide", res.data.id);
          }
        });
    },
    submitReg() {
      let is_top = false; //是否上传头部照片
      let is_middle = false; //是否上传中部照片

      if (Number(this.header) && this.header_id) {
        is_top = true;
      } else {
        if (!this.header_id && Number(this.header)) {
          this.$message({
            message: this.$t("请上传头部广告图片"),
            type: "warning",
          });
          return;
        } else {
          is_top = false;
        }
      }

      if (Number(this.center) && this.center_id) {
        is_middle = true;
      } else {
        if (!this.center_id && Number(this.center)) {
          this.$message({
            message: this.$t("请上传中部广告图片"),
            type: "warning",
          });
          return;
        } else {
          is_middle = false;
        }
      }
      this.submit(is_top, is_middle);
    },
    headerInput(val) {
      let max = this.height - 730 - this.center - this.footer;
      if (val > max) {
        this.$message({
          message: this.$t("不能大于") + max + this.$t("像素"),
          type: "warning",
        });
        this.header = "";
      }
    },
    headerSuccess(response, file) {
      this.header_id = response.msg;
      this.headerList[0] = file;
      this.headerDefaultImg = file.url;
    },
    headerRemove() {
      this.header_id = "";
      this.headerList = [];
      this.headerDefaultImg = require("../../assets/img/header_zhan.png");
    },
    headerError(err) {
      this.$message({
        message: this.$t("上传失败"),
        type: "warning",
      });
    },
    headerExceed() {
      this.$message({
        message: this.$t("只能上传一张"),
        type: "warning",
      });
    },
    centerInput(val) {
      let max = this.height - 730 - this.header - this.footer;
      if (val > max) {
        this.$message({
          message: this.$t("不能大于") + max + this.$t("像素"),
          type: "warning",
        });
        this.center = "";
      }
    },
    centerSuccess(response, file) {
      this.center_id = response.msg;
      this.centerList[0] = file;
      this.centerDefaultImg = file.url;
    },
    centerRemove() {
      this.center_id = "";
      this.centerList = [];
      this.centerDefaultImg = require("../../assets/img/center_zhan.png");
    },
    centerError(err) {
      this.$message({
        message: this.$t("上传失败"),
        type: "warning",
      });
    },
    centerExceed() {
      this.$message({
        message: this.$t("只能上传一张"),
        type: "warning",
      });
    },
    footerSuccess(response, file) {
      this.footer_id = response.msg;
      this.footerList[0] = file;
      this.footerDefaultImg = file.url;
    },
    footerRemove() {
      this.footer_id = "";
      this.footerList = [];
      this.footerDefaultImg = require("../../assets/img/footer_zhan.png");
    },
    footerError(err) {
      this.$message({
        message: this.$t("上传失败"),
        type: "warning",
      });
    },
    footerExceed() {
      this.$message({
        message: this.$t("只能上传一张"),
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.setting_box {
  margin-top: -20px;
}
.setting_box .head {
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
.hear_tip {
  margin-bottom: 20px;
}
.upload_box {
  margin-bottom: 20px;
}
.upload_box .lable {
  width: 120px;
  margin: 0;
}
.upload_box .el-input {
  width: 120px;
  margin: 0 10px;
}
.txt_box .lable {
  width: 120px;
  margin: 0;
}
.submit {
  margin-top: 40px;
}
.previcw_box {
  width: 360px;
  height: 640px;
  border: 1px solid #dddddd;
  overflow: hidden;
}
.previcw_box .img {
  width: 100%;
  height: 100%;
}
.footer {
  height: 63px;
}
.previcw_box .qrcode {
  width: 63px;
  height: 63px;
  margin-right: 17px;
}
.previcw_box .image {
  width: 280px;
  height: 63px;
}
</style>
